<template>
    <Page class="pagecenter" :total="pages.total" :current="pages.current" :page-size="pages.size" :page-size-opts="pageSizeOpts" show-elevator show-sizer show-total
        placement="top" @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
</template>
<script>
export default {
  name: 'navigation',
  props: {
    search: {
      type: Boolean,
      default: false,
      required: true
    },
    pageSizeOpts: {
      type: Array,
      default: function () {
        return [10, 20, 30, 40]
      }
    }
  },
  data () {
    return {
      pages: {
        total: 0,
        current: 1,
        size: this.pageSizeOpts[0]
      }
    }
  },
  watch: {
    search (v) {
      if (v) {
        this.pages.current = 1
        this.handlePage()
      }
    }
  },
  methods: {
    //    选择哪一页
    handlePage: function (value) {
      if (value) {
        this.pages.current = value
      }
      this.goPage()
    },
    //   改变页面记录行数
    handlePageSize (value) {
      this.pages.size = value
      this.goPage()
    },
    goPage: function () {
      this.$emit('navpage', this.pages, this.search)
      if (this.search) {
        this.$emit('update:search', false)
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .pagecenter {
        text-align: center;
        margin-top: 10px;
    }
</style>
